import styles from './index.module.scss'
import { Link } from 'react-router-dom'
import { useEffect, useRef, useState } from 'react'
import { history } from '@/utils/history'
const NotFound = () => {
  const [count, setCount] = useState(5)
  const intervalRef = useRef()
  useEffect(() => {
    intervalRef.current = window.setInterval(() => {
      setCount((prevState) => {
        if (prevState === 1) {
          clearInterval(intervalRef.current)
          history.push('/home')
        }
        // console.log(prevState)
        return prevState - 1
      })
    }, 1000)

    return () => {
      clearInterval(intervalRef.current)
    }
  }, [])

  return (
    <div className={styles.root}>
      <h1>对不起，您访问的页面不存在~</h1>
      <p>
        将在 {count} 秒后，返回首页（或者：点击立即返回
        <Link to="/home">首页</Link>)
      </p>
    </div>
  )
}

export default NotFound
